<template>
  <div>
      <div style="display:flex;">
        <div style="max-height:1000;overflow: auto;width:50%;"> 
          <h3>岗位列表
            <el-button @click="changeModel('add')" type="text" size="small" :disabled="editIndex!=null">新增</el-button></h3> 
        <el-table ref="multipleTable"
      :data="roleList"
      style="width: 100%" 
      size='mini' >

      <el-table-column label="岗位" width="150">
        <template scope="scope" >
      <span v-if="editIndex !== scope.$index">  {{scope.row.roleName}}</span>
      <span v-else><el-input v-model="editInput"></el-input></span>
        </template>
      </el-table-column>
       <el-table-column  label="创建时间" width="150">
        <template scope="scope" >
      <span>{{scope.row.createTime}}</span>
        </template>
      </el-table-column>

        <el-table-column width="150"> 
           <template slot-scope="scope">
<span v-if="editIndex === scope.$index"> 
     <el-button type="text" size="small" @click="saveChangeEdit(scope.$index,scope.row)">保存</el-button>
        <el-button @click="cancel()" type="text" size="small">取消</el-button>
</span>
<span v-else>   
  <el-button type="text" size="small" @click="editLang(scope.$index)" :disabled="scope.row === roleList[0]">编辑</el-button>
        <el-button @click="getPreRole(scope.row)" type="text" size="small" :disabled="scope.row === roleList[0]">查看</el-button></span>

      </template>
      </el-table-column>
          </el-table>
        </div>


        <div style="width:50%;" v-show="selectRolebackId !==''"> 
<h3>已选：{{selectRoleName}}
            <el-button @click="savePermissionId()" type="text" size="small" >保存</el-button></h3> 
</h3>
                 <el-tree :data="data2" show-checkbox node-key="id" default-expand-all   ref="tree" :default-checked-keys="selectRoleId" :props="defaultProps">
        </el-tree>
                
      
             </div>


      </div>

<!-- {{$refs.tree.getCheckedKeys().join(",")}} -->







  </div>
</template>

<script>
import * as Api from "@/api/Api.js";
import * as RoundApi from "@/api/RoundApi.js";
import * as Config from "@/api/Config.js";

export default {
  data() {
    return {
      addOrEdit: "add",
      selectRoleName: "",
      selectRoleId: [],
      selectRolebackId: "",
      editModel: false,
      editInput: "",
      editIndex: null,
      expanded: [],
      roleList: [],
      defaultProps: {
        children: "children",
        label: "label"
      },
      data2: [
        {
          id: "1",
          label: "店铺信息"
        },
        {
          id: "2",
          label: "技术信息",
          children: [
            //分组列表
            {
              id: "3",
              label: "技术信息分组(属性)",
              children: [
                {
                  id: "4",

                  label: "属性查看"
                },
                {
                  id: "5",

                  label: "属性新增"
                },
                {
                  id: "6",

                  label: "属性修改"
                },
                {
                  id: "7",

                  label: "属性删除"
                }
              ]
            },
            {
              id: "36",
              label: "技术信息分组",
              children: true
            },
            {
              id: "8",
              label: "技术信息分组(新增)",
              children: true
            },
            {
              id: "9",
              label: "技术信息分组(编辑)",
              children: true
            },
            {
              id: "10",
              label: "技术信息分组(删除)",
              children: true
            },
            {
              id: "11",
              label: "技术信息分组(关联车型)",
              children: true
            }
          ]
        },

        //根据商户是否有该功能权限 再做判断
        {
          id: "24",
          label: "会员信息", //menu
          children: [
            {
              id: "25",
              label: "会员列表" //table
            },

            {
              id: "27",
              label: "会员列表(修改等级)"
            },

            
         
          ]
        }
      ]
    };
  },
  methods: {
    savePermissionId() {
      let model = {
        permissionIds: this.$refs.tree.getCheckedKeys().join(","),
        roleId: this.selectRolebackId
      };
      RoundApi.roleUpdatePermission(this, model).then(res => {
        if (res.retCode) {
          console.log("修改权限", res.data);
          this.$message("修改成功");
        }
      });
    },
    getPreRole(row) {
      this.selectRoleId = [];
      console.log(row);
      this.selectRoleName = row.roleName;
      this.selectRolebackId = row.id;
      let model = {
        roleId: row.id
      };
      RoundApi.roleGetPermission(this, model).then(res => {
        if (res.retCode) {
          console.log("查某个权限", res.data);
          res.data.forEach((item, index) => {
            this.selectRoleId.push(item.permissionId);
          });

          this.$refs.tree.setCheckedKeys(this.selectRoleId);
        }
      });
    },
    cancel() {
      this.editIndex = null;
      if (this.addOrEdit === "add") {
        this.removeByValue(
          this.roleList,
          this.roleList[this.roleList.length - 1]
        );
      }
    },
    removeByValue(arr, val) {
      for (var i = 0; i < arr.length; i++) {
        if (arr[i] == val) {
          arr.splice(i, 1);
          break;
        }
      }
    },
    saveChangeEdit(index, row) {
      if (this.addOrEdit === "edit") {
        let model = {
          roleId: row.id,
          roleName: this.editInput,
          valid: row.valid
        };
        RoundApi.updateMerchantRole(this, model).then(res => {
          if (res.retCode) {
            this.editIndex = null;
            this.getMerchantRole();
          }
        });
      } else {
        let model = {
          roleName: this.editInput
        };
        RoundApi.addMerchantRole(this, model).then(res => {
          if (res.retCode) {
            this.editIndex = null;
            this.getMerchantRole();
            console.log("角色新增", res);
          }
        });
      }
    },
    editLang(index) {
      this.addOrEdit = "edit";
      this.editIndex = index;
      this.editInput = this.roleList[index].roleName;
    },
    changeModel(type) {
      this.addOrEdit = "add";
      this.editInput = "";
      this.roleList.push("");
      this.editIndex = this.roleList.length - 1;
    },
    getMerchantRole() {
      console.log(this.$refs.tree.getCheckedKeys());
      RoundApi.getMerchantRole(this, {}).then(res => {
        if (res.retCode) {
          this.roleList = res.data;
          console.log("商户角色", res);
        }
      });
    }
  },
  mounted() {
    // data2
    // $store.getters.getModel.basicMall === 'true'
console.log()


    if (this.$store.getters.getModel.seniorMall === "true") {
      this.data2[2].children.push({
        id: "33",
        label: "会员等级折扣",
        children: true
      });
    }
  if(this.$store.getters.getModel.maintenanceUpload === "true"){
        this.data2[2].children.push( {
              id: "30",
              label: "维修记录(列表)"
            },
            {
              id: "31",
              label: "维修记录(新增)"
            },
            {
              id: "32",
              label: "维修记录(修改)"
            });
  

  }

    if (this.$store.getters.getModel.memberAudit === "true") {
      this.data2[2].children.push({
        id: "28",
        label: "会员列表(会员审核)"
      });
    }
        this.data2.push({
        id: "12",
        label: "商品信息",
        children: [
          {
            id: "13",
            label: "添加商品",
            children: true
          },
          {
            id: "14",
            label: "商品列表",
            children: [
              {
                id: "35",
                label: "商品列表"
              },
              {
                id: "15",

                label: "商品列表(修改)"
              },
              {
                id: "16",

                label: "商品列表(删除)"
              },
              {
                id: "17",
                label: "上下架商品"
              }
            ]
          }
        ]
      });
    if (this.$store.getters.getModel.basicMall === "true") {
      this.data2[2].children.push({
              id: "29",
              label: "会员列表(消费记录)"
            });
  
      this.data2.push({
        id: "18",
        label: "订单信息",
        children: [
          //订单列表
          {
            id: "34",
            label: "订单列表",
            children: true
          },
          {
            id: "20",
            label: "订单详情",
            children: true
          },
          {
            id: "21",
            label: "退款",
            children: true
          },
          {
            id: "22",
            label: "发货",
            children: true
          }
        ]
      });
      this.data2.push({
        id: "23",
        label: "财务信息"
      });
    }

    this.getMerchantRole();
    // for (let i = 1; i < 40; i++) {
    //   this.expanded.push(i);
    // }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.roleItem {
  border-radius: 8px;
  padding: 20px;
  margin: 10px;
  border: 1px #e5e5e5 solid;
}
</style>
